<template>

  <div class="app-main">
      <div class="line_search">
          <el-select v-model="queryParams.deviceType">
            <el-option label="pc端" value="pc"></el-option>
            <el-option label="移动端" value="mobile"></el-option>
            <el-option label="平板" value="pad"></el-option>
          </el-select>
          <el-select
            style="margin-left: 20px;"
            v-model="queryParams.locate">
            <el-option label="中文" value="zh"></el-option>
            <el-option label="英语" value="en"></el-option>
            <el-option label="法语" value="fr"></el-option>
            <el-option label="日语" value="ja"></el-option>
          </el-select>


           <button class="add" @click="search">搜索</button>
      </div>


    <el-table :data="tableData" style="margin-top: 20px;" border>
      <el-table-column prop="sectionNameLable" label="模块名称" width="180" align="center"/>
      <el-table-column prop="sectionTypeLable" label="模块类型" width="180" align="center"/>
      <el-table-column
        prop="videoUrl"
        label="视频"
        align="center"
        width="180">
        <template slot-scope="scope">
           <el-image
                v-if="scope.row.videoUrl"
                style="width: 60px; height: 60px"
                :src="imageHost + scope.row.videoUrl"
                :preview-src-list="[imageHost + scope.row.videoUrl]"
                  />
        </template>
      </el-table-column>

      <el-table-column
        prop="productUrl"
        label="产品图"
        align="center"
        width="180">
        <template slot-scope="scope">
           <el-image
                v-if="scope.row.productUrl"
                style="width: 60px; height: 60px"
                :src="imageHost + scope.row.productUrl"
                :preview-src-list="[imageHost + scope.row.productUrl]"
                  />
        </template>
      </el-table-column>

      <el-table-column
        prop="bgUrl"
        label="背景图"
        align="center"
        width="180">
        <template slot-scope="scope">
           <el-image
                style="width: 60px; height: 60px"
                :src="imageHost + scope.row.bgUrl"
                :preview-src-list="[imageHost + scope.row.bgUrl]"
                  />
        </template>
      </el-table-column>

      <el-table-column prop="title" label="标题" width="180" align="center"/>
      <!-- <el-table-column prop="titleEn" label="标题英文" width="180" align="center"/> -->
      <el-table-column prop="productDesc" label="产品描述"  align="center"/>
      <!-- <el-table-column prop="productDescEn" label="产品描述英文" width="180" align="center"/> -->

      <el-table-column label="操作" align="center"  width="180" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:user:edit']">修改</el-button>
          <!-- <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:user:remove']">删除</el-button> -->
        </template>
      </el-table-column>

    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="fetchList" />

    <!-- ref 声明变量 -->
    <DialogAdd ref="DialogAdd" @custom-event="getList"/>

    <UpdateSectionDialog ref="updateDialog" :form="form" @custom-event="getList"></UpdateSectionDialog>

    <DeleteDialog ref="deleteDialog" :formId="formId" @delete-event="onSubmitDelete"/>

  </div>

</template>

<script>
    // 使用相对路径
    import { getSectionList,deleteSection } from "../../../api/system/home_section";
    import DialogAdd from "./components/DialogAdd.vue";
    import UpdateSectionDialog from "./components/UpdateSectionDialog.vue";
    import DeleteDialog from "@/components/DeleteDialog.vue";

    import { imageHost } from "@/api/ImageHost";
    import { getBannerSectionList } from "@/api/system/home_banner";

    export default{
      components:{DialogAdd , UpdateSectionDialog,DeleteDialog},
      data(){
        return{
          imageHost:'',
          bannerSectionList:[],
          tableData:[],
          total:0,
          queryParams:{
            pageNum:1,
            pageSize:7,
            deviceType:'pc',
            locate:'zh'
          },

          form: {
              id:-1,
              sectionType:'',
              videoUrl:'',
              productUrl:'',
              bgUrl:'',
              title:'',
              titleEn:'',
              productDesc:'',
              productDescEn:'',
              sort:-1,
              sectionName:''
          },
          formId:-1

        }
      },
      created(){
         this.imageHost=imageHost();
         this.fetchList();
         // 获取轮播图所属模块   集合
         getBannerSectionList().then(response=>{
             this.bannerSectionList = response.data;
         })

      },
      methods:{
         // 分页查询
         fetchList(){
          // const params = {pageNum:1,pageSize:100}
          getSectionList(this.queryParams).then(response=>{
             this.tableData = response.rows
             this.total=response.total
             this.sectionTypeFilter(this.tableData)
             this.sectionNameFilter(this.tableData)

          })

         },
         sectionTypeFilter(list){
            list.forEach(it => {
                if(it.sectionType === "0"){
                  it.sectionTypeLable = '视频'
                }else if(it.sectionType === "1"){
                  it.sectionTypeLable = '图片'
                }else if(it.sectionType === "2"){
                  it.sectionTypeLable = '轮播图'
                }else{
                  it.sectionTypeLable = '未知类型'
                }
            });
         },
         sectionNameFilter(list){
            list.forEach(it => {
                if(it.bsType === "section_0"){
                  it.sectionNameLable = '模块一'
                }else if(it.bsType === "section_1"){
                  it.sectionNameLable = '模块二'
                }else if(it.bsType === "section_2"){
                  it.sectionNameLable = '模块三'
                }else if(it.bsType === "section_3"){
                  it.sectionNameLable = '模块四'
                }else if(it.bsType === "section_4"){
                  it.sectionNameLable = '模块五'
                }else if(it.bsType === "section_5"){
                  it.sectionNameLable = '模块六'
                }else if(it.bsType === "section_6"){
                  it.sectionNameLable = '模块七'
                }else if(it.bsType === "section_7"){
                  it.sectionNameLable = '模块八'
                }else if(it.bsType === "section_8"){
                  it.sectionNameLable = '模块九'
                }else if(it.bsType === "section_9"){
                  it.sectionNameLable = '模块十'
                }else if(it.bsType === "section_10"){
                  it.sectionNameLable = '模块十一'
                }else if(it.bsType === "section_11"){
                  it.sectionNameLable = '模块十二'
                }



            });

         },

         search(){
           this.fetchList();

         },

         // addSection(){
         //   this.$refs['DialogAdd'].setBannerSection(this.bannerSectionList);
         //   this.$refs['DialogAdd'].showDialog();

         // },

         getList(){
            this.fetchList();

         },
         handleUpdate(row){
            this.$refs['updateDialog'].showDialog();
            // 将一个对象的所有属性值都赋值给另一个对象
            Object.assign(this.form, row);
            // console.log(this.form); // 输出: { a: 1, b: 2, c: 3 }

         },
         handleDelete(row){
            this.$refs['deleteDialog'].showDialog();
            this.formId=row.id;

         },
          onSubmitDelete(data){
              deleteSection(data).then(response => {
                console.log(response);
                this.$refs['deleteDialog'].hideDialog();
                this.fetchList();

              });
          }

      },

    }
</script>


<style scoped>

.app-main{
  width: 100%;
  height: 100%;
  /* background-color: aquamarine; */
  /* height: 100vh; */
  display: flex;
  flex-direction: column;
  padding: 20px;

}

.add{
    width: 60px;
    height: 30px;
    margin-left: 15px;
    background-color:#409EFF;
    border:none;
    border-radius: 5px;
    color: #ffffff;

}

.line_search{
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 20px;
  margin-left: 20px;

}



</style>
